<template>
  <a-modal
    title="重置密码"
    :width="320"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          label="输入密码"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input-password
            v-decorator="['loginPwd', {rules: [
              { required: true, message: '请输入登录密码', trigger: 'blur' },
              { validator: validatePwd, trigger: 'blur' }]}]" />
        </a-form-item>
        <a-form-item
          label="确认密码"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input-password
            v-decorator="['confirmPwd', {rules: [
              { required: true, message: '请再次确认密码', trigger: 'blur' },
              { validator: confirmPwd, trigger: 'blur' }]}]" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { resetPwd } from '@/api/basic/user'

export default {
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      visible: false,
      confirmLoading: false,
      userId: 0,

      form: this.$form.createForm(this)
    }
  },
  methods: {
    resetPwd (userId) {
      this.visible = true
      this.userId = userId
    },
    // 前端验证密码
    validatePwd (rule, value, callback) {
      const regex = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,}$/
      if (value === '' || value === undefined || value === null) {
        callback()
      } else {
        if (regex.test(value)) {
          return callback()
        } else {
          return callback(new Error('大写字母，小写字母，数字，特殊符号四选三，长度至少8位'))
        }
      }
    },
    // 前端两次密码是否一致
    confirmPwd (rule, value, callback) {
      if (value === '' || value === undefined || value === null) {
        callback()
      } else {
        if (this.form.getFieldValue('loginPwd') === value) {
          return callback()
        } else {
          return callback(new Error('请确保两次密码输入一致'))
        }
      }
    },
    handleSubmit () {
      const { form: { validateFields } } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          resetPwd(Object.assign(values, { 'userId': this.userId }))
            .then(() => {
              this.visible = false
              this.confirmLoading = false
              this.form.resetFields()
              this.$message.success('密码重置成功！')
            }).catch(err => {
            this.confirmLoading = false
            this.$message.error(err.result || '操作失败！')
          })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel () {
      this.form.resetFields()
      this.visible = false
    }
  }
}
</script>
